<template>
  <div class="base-slot">
    <Row class="title-top">
      <p class="title mb-10">1.插槽</p>
      <!--引用组件，从子组件slot-list中获取数据， 将todo作为一个插槽 prop 进行绑定,，插槽 prop 允许我们将插槽转换为可复用的模板-->
      <slot-list>
        <template v-slot:todo="{ todo }">
          <span v-if="todo.isComplete">✓</span>
          {{ todo.text }}
        </template>
      </slot-list>
    </Row>
    <Row class="title-top mb-10">
      <p class="title mb-10">2.原生事件</p>
      <!--直接在父级声明，但为了区分原生事件和自定义事件，要用到事件修饰符 .native,如果不写 .native 修饰符，那上面的 @click 就是自定义事件 click，而非原生事件 click -->
      <BaseEvent @click.native="handleClick"></BaseEvent>
    </Row>
    <Row class="title-top mb-10">
      <p class="title mb-10">3.具有数字校验功能的Form表单组件</p>
      <i-form ref="form" :model="addForm" :rules="validRules">
        <i-form-item label="用户名" prop="name">
          <i-input v-model="addForm.name"></i-input>
        </i-form-item>
        <i-form-item label="电子邮箱" prop="email">
          <i-input v-model="addForm.email"></i-input>
        </i-form-item>
        <i-form-item prop="single">
          <p class="title mb-10">组合多选框组件——CheckboxGroup & Checkbox</p>
          <i-checkbox v-model="addForm.single" @on-change="handleCheckBox">单独选项</i-checkbox>
          数据：{{ addForm.single }}
        </i-form-item>
        <i-form-item prop="multiple">
          <p class="title mb-10">组合多选框组件——CheckboxGroup & Checkbox</p>
          <i-checkbox-group v-model="addForm.multiple">
            <i-checkbox label="option1">选项 1</i-checkbox>
            <i-checkbox label="option2">选项 2</i-checkbox>
            <i-checkbox label="option3">选项 3</i-checkbox>
            <i-checkbox label="option4">选项 4</i-checkbox>
          </i-checkbox-group>
          数据：{{ addForm.multiple }}
        </i-form-item>
      </i-form>
      <button @click="handleSubmit" class="mt-20 mr-10">提交</button>
      <button @click="handleReset">重置</button>
    </Row>
    <Row class="title-top mb-10">
      <p class="title mb-10">4.Vue的构造器——extend 与手动挂载——$mount(常用于独立组件中)</p>
      <button @click="handleOpen1" class="mr-20">打开提示 1</button>
      <button @click="handleOpen2">打开提示 2</button>
      <p></p>
    </Row>
    <Row class="title-top mb-10">
      <p class="title mb-10">5.通过传入scopeSlot的渲染函数，给子组件去调用</p>
      <p class="title mb-10">
        tmpl写法与jsx写法的区别网址:https://blog.csdn.net/weixin_33859844/article/details/91426173
      </p>
      <!--首先需要定义一个BaseRender.js渲染js -->
      <!--目前写法正确，只是该项目使用ts搭建，导致渲染不出来 -->
      <BaseRender :render="renderFunc"></BaseRender>
    </Row>
  </div>
</template>

<script>
import SlotList from "./SlotList";
import BaseEvent from "./BaseEvent";
import iForm from "@components/iv-form/form";
import iFormItem from "@components/iv-form/form-item";
import iInput from "@components/iv-input/Input";
import iCheckbox from "@components/iv-checkbox/checkbox";
import iCheckboxGroup from "@components/iv-checkbox/checkbox-group";
import BaseRender from "@components/iv-render/BaseRender.js";
import ListItem from "./ListItem"; //注意在render或者JSX中写的组件是不需要在components中注册的。
// import ChooseModal from "@components/iv-choose/ChooseModal";
const props = {}; // 这里可以传入一些组件的 props 选项
export default {
  name: "BaseSlot",
  components: {
    SlotList,
    BaseEvent,
    iForm,
    iFormItem,
    iInput,
    iCheckbox,
    iCheckboxGroup,
    BaseRender
  },
  data() {
    return {
      addForm: {
        name: "",
        email: "",
        single: false,
        multiple: ["option1", "option3"],
        sloctList: [{ name: "hello" }, { name: "world" }, { name: "!" }]
      }
    };
  },
  computed: {
    validRules() {
      return {
        name: [{ required: true, message: "用户名不能为空", trigger: "" }],
        email: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确", trigger: "change" }
        ],
        single: [{ required: false, message: "请选择", trigger: "change" }]
      };
    }
  },

  methods: {
    handleClick() {
      console.log("来自子组件的派发");
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log("校验成功");
        } else {
          console.log("校验失败");
        }
      });
    },
    handleReset() {
      this.$refs.form.resetFields();
    },
    handleCheckBox() {
      console.log("checkbox自带的方法");
    },
    handleOpen1() {
      this.$BaseAlter.info({
        content: "我是提示信息 1"
      });
    },
    handleOpen2() {
      this.$BaseAlter.info({
        content: "我是提示信息 2",
        duration: 3
      });
    },
    // renderFunc(h) {
    //   return (
    //     <div
    //       onclick={() => {
    //         alert("JSX绑定自定义事件");
    //       }}
    //     >
    //       <h1>Hello, world</h1>
    //     </div>
    //   );
    // },
    //在JSX中使用组件ListItem,不需要注册
    renderFunc(h) {
      // return (
      //   <div>
      //     {this.sloctList.map(item => (
      //       <ListItem
      //         data={item}
      //         {...{
      //           scopedSlots: {
      //             default: ({ data }) => {
      //               return <div>{data}</div>;
      //             }
      //           }
      //         }}
      //       />
      //     ))}
      //   </div>
      // );
    }
  },
  mounted() {
    //用 $mount 手动渲染的组件，如果要销毁，也要用 $destroy 来手动销毁实例，
    // const Instance = new Vue({
    //   render(h) {
    //     return h(ChooseModal, {
    //       props: props
    //     });
    //   }
    // });
    // const component = Instance.$mount();
    // document.body.appendChild(component.$el);
  }
};
</script>

<style lang="stylus" scoped>
.base-slot {
}
</style>
